<div id="WorkflowNodeRun" *ngIf="nodeRun">
    <ng-container *ngIf="nodeRun && workflowRun">
        <app-workflow-node-run-summary [project]="project" [nodeRun]="nodeRun" [workflow]="workflowRun.workflow" [duration]="duration"></app-workflow-node-run-summary>
    </ng-container>
    <div class="CDSmenu">
        <sm-menu title="" class="pointing secondary">
            <a sm-item [class.active]="selectedTab === 'pipeline'" (click)="showTab('pipeline')">
                <i class="sitemap icon"></i>
                {{ 'common_pipeline' | translate }}
            </a>
            <a sm-item [class.active]="selectedTab === 'commit'" [class.disabled]="!nodeRun || !nodeRun.commits || nodeRun.commits.length === 0" (click)="nodeRun.commits && nodeRun.commits.length !== 0 && showTab('commit')">
                <span *ngIf="nodeRun.commits">{{ nodeRun.commits.length + ' '}}</span>
                <span *ngIf="nodeRun.commits && nodeRun.commits.length > 1">{{ 'common_commits' | translate }}</span>
                <span *ngIf="!nodeRun.commits || (nodeRun.commits && nodeRun.commits.length < 2)">{{ 'common_commit' | translate }}</span>
            </a>
            <a sm-item [class.active]="selectedTab === 'vuln'" [class.disabled]="!nodeRun || !nodeRun.vulnerabilities_report" (click)="showTab('vuln')">
                <span  *ngIf="nbVuln > 0 || deltaVul !== 0">{{nbVuln + ' '}}</span>
                <span>{{ 'common_vulnerabilities' | translate }}</span>
                <span *ngIf="deltaVul !== 0">
                    (
                    <span *ngIf="deltaVul < 0"><i class="green caret down icon"></i></span>
                    <span *ngIf="deltaVul > 0"><i class="red caret up icon"></i></span>
                    <span *ngIf="deltaVul !== 0">{{deltaVul}}</span>
                    )
                </span>
            </a>
            <a sm-item [class.active]="selectedTab === 'test'" (click)="nodeRun.tests && nodeRun.tests.total !== 0 && showTab('test')" [class.disabled]="!nodeRun.tests || nodeRun.tests.total === 0">
                <span *ngIf="nodeRun && nodeRun.tests && nodeRun.tests.total > 1">{{ 'common_tests' | translate }}</span>
                <span *ngIf="!nodeRun || !nodeRun.tests || nodeRun.tests.total < 2">{{ 'common_test' | translate }}</span>
                <span *ngIf="nodeRun && nodeRun.tests ">{{ ' (' +nodeRun.tests.total + ')'}}</span>
            </a>
            <a sm-item
              [class.active]="selectedTab === 'artifact'"
              (click)="((nodeRun.artifacts && nodeRun.artifacts.length !== 0) || (nodeRun.static_files && nodeRun.static_files.length !== 0)) && showTab('artifact')"
              [class.disabled]="(!nodeRun || !nodeRun.artifacts || nodeRun.artifacts.length === 0) && (!nodeRun.static_files || nodeRun.static_files.length === 0)">
                <span *ngIf="nodeRun && nodeRun.artifacts && nodeRun.artifacts.length > 1">{{ 'common_artifacts' | translate }}</span>
                <span *ngIf="!nodeRun || !nodeRun.artifacts || nodeRun.artifacts.length < 2">{{ 'common_artifact' | translate }}</span>
                <span *ngIf="nodeRun && nodeRun.artifacts ">{{ ' (' + nodeRun.artifacts.length + ')'}}</span>
            </a>
            <a sm-item [class.active]="selectedTab === 'history'" (click)="nodeRunsHistory.length !== 0 && showTab('history')" [class.disabled]="nodeRunsHistory.length === 0">
                {{ 'common_history' | translate }}
                {{ ' (' + nodeRunsHistory.length + ')'}}
            </a>
        </sm-menu>
    </div>
    <div class="scrollingContent" ngx-auto-scroll>
        <div class="paddingContent">
            <div class="viewContent" [ngSwitch]="selectedTab">
                <div *ngSwitchCase="'pipeline'">
                    <app-node-run-pipeline [run]="nodeRun" [project]="project" [workflowName]="workflowName"></app-node-run-pipeline>
                </div>
                <div *ngSwitchCase="'artifact'">
                    <app-workflow-artifact-list [artifacts]="nodeRun.artifacts" [staticFiles]="nodeRun.static_files"></app-workflow-artifact-list>
                </div>
                <div *ngSwitchCase="'vuln'">
                    <app-vulnerabilities [report]="nodeRun.vulnerabilities_report"></app-vulnerabilities>
                </div>
                <div *ngSwitchCase="'commit'">
                    <app-commit-list [commits]="nodeRun.commits"></app-commit-list>
                </div>
                <div *ngSwitchCase="'test'">
                    <app-workflow-tests-result [tests]="nodeRun.tests" [coverage]="nodeRun.coverage"></app-workflow-tests-result>
                </div>
                <div *ngSwitchCase="'history'">
                    <app-workflow-node-run-history [run]="workflowRun" [project]="project" [currentBuild]="nodeRun" [history]="nodeRunsHistory" [workflowName]="workflowName"></app-workflow-node-run-history>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui text active loader" *ngIf="!nodeRun">{{ 'pipeline_loading' | translate }}</div>
